<template>
  <el-dialog v-model="dialogUserVisible" title='用户信息' width="500px" center draggable>
    <el-container>
      <el-aside width="200px">
				<el-avatar shape="square" :size="120" :src="userData.image_url" />
			</el-aside>
			<el-main>
				<div>账号：{{userData.account}}</div>
				<div>姓名：{{userData.name}}</div>
				<div>性别：{{userData.sex}}</div>
				<div>部门：{{userData.department}}</div>
				<div>邮箱：{{userData.email}}</div>
				<div>状态：
					<span v-if="userData.status==0">正常</span>
					<span v-else>冻结</span>
				</div>
			</el-main>
    </el-container>

    <el-footer>
			<span @click="openEdit(userData.id)">编辑</span>
			<span @click="openPromote(userData.id)">赋权</span>
			<span @click="openDelete(userData.id)">删除用户</span>
		</el-footer>
  </el-dialog>

  <EditUser ref="editUser"></EditUser>
  <PromoteUser ref="promoteUser"></PromoteUser>
  <RemoveUser ref="removeUser"></RemoveUser>
  
</template>
 
<script setup lang="ts">
  import { ref, onBeforeUnmount, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import { bus } from "@/utils/mitt.js";
  import EditUser from "../components/userInfor/editUser.vue";
  import PromoteUser from './userInfor/promoteUser.vue';
  import RemoveUser  from '../components/delete_admin.vue'; // 用删除管理员的组件
  
  interface FormData {
    id: number,
		account : number,
    image_url: string, 
		name : string,
		sex : string,
		email : string,
		department: string,
		status : number
	}
	const userData:FormData = reactive({
    id: 0,
		account: 0,
    image_url: '', 
		name: '',
		sex: '',
		email: '',
		department: '',
		status: 0
	})

  bus.on('userId', (row : any) => {
		userData.id = row.id
		userData.image_url = row.image_url
		userData.account = row.account
		userData.name = row.name
		userData.sex = row.sex
		userData.email = row.email
		userData.department = row.department
		userData.status = row.status
	})

  bus.on('offDialog', (id : number) => {
		if (id) {
			dialogUserVisible.value = false
		}
	})

  const editUser = ref()
  const openEdit = (id:number) => {
    bus.emit('editId', id)   
    editUser.value.open()
  }

  const promoteUser = ref()
  const openPromote = (id:number) => {
    bus.emit('promoteId', id)
    promoteUser.value.open()
  }

  const removeUser = ref()
  const openDelete = (id:number) => {
    let userInfo = {
			id:id,
			account:userData.account,
			name:userData.name
		}
		bus.emit('deleteUserId', userInfo)
    removeUser.value.open()
  }

  // ------------------------------------------------------------------------------
  // 弹窗开关
	const dialogUserVisible = ref(false) 
  const open = () => {
    dialogUserVisible.value = true
  }
  defineExpose({
    open
  })
  onBeforeUnmount(()=>{
    bus.all.clear()
  })
</script>

<style lang="scss" scoped>
	.el-main>div {
		margin-bottom: 8px;
	}

	.el-main {
		--el-main-padding: 0px;
	}

	.el-footer {
		display: flex;
		justify-content: flex-end;
		--el-footer-height: 8px;

		span {
			margin-left: 8px;
			color: #409eff;
			cursor: pointer;
		}
	}
</style>
